<template>
  <div class="content">
    <img
      class="banner"
      src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/banner_distribution.png"
      mode="widthFix"
    />
    <div class="hint">
      <div class="imgBox">
        <span>分销市场的价值</span>
        <img :src="themeImg" mode="scaleToFill" class="img2" />
      </div>
      <p>“分销市场”面向全平台销售商，品质好、服务号的商品将优先展示给各个销售商，帮助供货商想全国出售。</p>
      <div class="imgBox">
        <span>申请须知</span>
        <img :src="themeImg" mode="scaleToFill" class="img2" />
      </div>
      <p>1.我们希望您仔细阅读爱卡卡供货商管理制度，并严格按照其内容执行；</p>
      <p>2.成为供应商后请务必杜绝虚假资质上传，虚假发货等行为</p>
      <p>3.成为供应商后请务必保证商品售卖的合法合规。</p>
      <p>4.我们将严格审核供应商上传的分销商品，经我方同意后才能完成分销市场的上架。</p>
    </div>
    <p class="hintText">我们希望您能提供您所售卖商品的资质证书，若没有可不上传。</p>
    <div class="handleBox">
      <i-radio-group
        :current="current"
        @change="handleChange"
        i-class="radioLeft"
      >
        <i-radio value="我已仔细阅读并同意"></i-radio>
      </i-radio-group>
      <div class="linkDeal">
        <a href="/pages/shop-management/deal1/main">《分销市场管理规范》</a>
        <!-- <span>和</span> -->
        <a href="/pages/shop-management/deal2/main">《供应商入驻协议》</a>
      </div>
    </div>

    <button @click="stateClcik" class="applyBtn">立即申请</button>
  </div>
</template>

<script>
import {
  FIND_SHOP_KIND_APPLY_PAGE_API,
  CREATE_SHOP_KIND_APPLY_API
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      state: '',
      current: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/distribution_label2.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/distribution_label22.png'
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this._findShopKindApplyPageApi()
  },
  methods: {
    handleChange (e) {
      const vm = this
      let val = e.target.value
      if (vm.current) {
        vm.current = ''
      } else {
        vm.current = val
      }
    },
    stateClcik () {
      const vm = this
      if (!vm.current) {
        vm.$toast('请先勾选同意')
        return false
      }
      if (vm.account.shopKind === 'SUPPLIER') {
        vm.$toast('你已经成功供货商，请勿重新申请')
      } else {
        vm.$dialog('确定申请成功供货商').then(r => {
          vm._createShopKindApplyApi()
        })
      }
    },
    _findShopKindApplyPageApi () {
      const vm = this
      let params = {
        phone: vm.$cookie.get('account').cellphone,
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      FIND_SHOP_KIND_APPLY_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.list.length) {
              let state = r.data.data.list[0].state
              vm.state = state
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _createShopKindApplyApi () {
      const vm = this
      let params = {
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      CREATE_SHOP_KIND_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  // vm.$router.go(-1)
                  vm._findShopKindApplyPageApi()
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  width: 100%;
  .banner {
    width: 100%;
    height: 180px;
  }
  .hint {
    width: 95%;
    margin: 20px auto;
    box-shadow: 1px 2px 4px #c1c6d4;
    .imgBox {
      height: 40px;
      position: relative;
      span {
        position: absolute;
        top: 0;
        left: 0px;
        z-index: 2;
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
      }
      img {
        height: 40px;
        position: absolute;
        top: 0;
        left: -5px;
        z-index: 1;
      }
      .img1 {
        width: calc(110px + 10px);
      }
      .img2 {
        width: calc(60px + 10px);
      }
    }
    p {
      width: 90%;
      margin: auto;
      padding: 10px 0;
      color: #747474;
      font-size: 13px;
    }
  }
  .hintText {
    width: 95%;
    margin: 20px auto;
    color: #999;
    font-size: 12px;
  }
  .handleBox {
    // display: flex;
    .radioLeft {
      font-size: 13px;
      padding: 0;
    }
    .linkDeal {
      width: 100%;
      display: flex;
      // flex-direction: column;
      font-size: 13px;
      line-height: 48px;
      margin-left: 30px;
      a {
        color: #ef250b;
      }
    }
  }
  .applyBtn {
    width: 95%;
    height: 40px;
    margin: 30px auto 0;
    background: linear-gradient(to right, #ec4834, #fb705b);
    color: #fff;
    font-size: 14px;
    list-style: 40px;
    border-radius: 50px;
  }
}
</style>
